<template>
  <div class="hedge-account layout-content">
    <c-table
      :data="accountList"
      :columns="accountColumns"
      :loading="loading"
      :add="$btn('addHedgeAccount')"
      addText="新增套保账户"
      @onAdd="addAccount"
      @onReload="reload"
    >
      <template v-slot:handle="{ row }">
        <div class="handle">
          <c-button
            type="link"
            @click="loginAccount(row)"
            v-if="
              row.connectionStatus ===
                hedgeDict.connectionStatus.ununited.value &&
                $btn('loginHedgeAccount')
            "
            >登录</c-button
          >
          <c-button
            type="link"
            @click="loginAccount(row)"
            v-if="
              row.connectionStatus ===
                hedgeDict.connectionStatus.connected.value &&
                $btn('loginHedgeAccount')
            "
            >重新登录</c-button
          >
          <c-button
            type="link"
            @click="editAccount(row)"
            v-if="$btn('editHedgeAccount')"
            >修改</c-button
          >
          <a-popconfirm
            :title="
              `是否确认删除 ${row.futuresCompanyName} 的 ${row.accountId} 账户？`
            "
            @confirm="delAccount(row)"
            v-if="$btn('delAccount')"
          >
            <c-button type="link">删除</c-button>
          </a-popconfirm>
        </div>
      </template>
      <template v-slot:connectionStatus="{ row }">
        <ConnectionStatus :flag="row" />
      </template>
    </c-table>
    <p>
      <span>相关协议：</span>
      <c-button
        type="link"
        style="padding: 16px 0;"
        @click="explainVisible = true"
        >《自动套保功能说明》</c-button
      >
    </p>
    <c-modal
      v-model="updateVisible"
      :title="modalTitle"
      @ok="updateAccountSubmit"
      @afterClose="afterClose"
      destroyOnClose
    >
      <c-form
        v-model="updateForm"
        :data="updateFormData"
        ref="updateForm"
        :col="{ labelCol: { style: 'width: 100px;' } }"
      >
        <template v-slot:futuresCompanyId>
          <a-select
            v-model="updateForm.futuresCompanyId"
            show-search
            option-filter-prop="children"
            placeholder="请选择期货公司"
          >
            <a-select-option v-for="item in futuresCompanys" :key="item.id"
              >{{ item.companyName }}
            </a-select-option>
          </a-select>
        </template>
      </c-form>
      <!-- <div class="testConnect">
        <c-button ghost type="primary" @click="testConnect">测试连接</c-button>
        <span>
          <span style="padding-left:6px;" class="info">
            测试连接按钮用于验证您填写的交易账户信息是否属实
          </span>
        </span>
      </div> -->
    </c-modal>
    <c-modal
      v-model="explainVisible"
      title=""
      width="800px"
      noFooter
      :bodyStyle="{ maxHeight: '700px', overflow: 'auto' }"
    >
      <Explain :modal="true" />
    </c-modal>
  </div>
</template>

<script>
import {
  getfuturescompanys,
  gethedgeaccountlist,
  addhedgeaccount,
  updatehedgeaccount,
  deletehedgeaccount,
  hedgeaccountlogin
} from "@/api/hedge";
import Explain from "./explain";
import ConnectionStatus from "@/components-business/hedge/connectionStatus";
import hedgeDict from "@/dict/hedge";
// import { beforeEnter } from "./mixins/beforeEnter.js";

const accountColumns = [
  {
    title: "期货公司",
    dataIndex: "futuresCompanyName"
  },
  {
    title: "账户",
    dataIndex: "accountId"
  },
  {
    title: "前置地址",
    dataIndex: "address"
  },
  {
    title: "APPID",
    dataIndex: "appid"
  },
  {
    title: "认证码",
    dataIndex: "authCode"
  },
  {
    title: "连接情况",
    dataIndex: "connectionStatus",
    scopedSlots: { customRender: "connectionStatus" }
  },
  {
    title: "操作",
    scopedSlots: { customRender: "handle" }
  }
];
const updateFormData = [
  {
    label: "期货公司",
    prop: "futuresCompanyId",
    slot: "futuresCompanyId",
    required: true,
    errorMsg: "请选择期货公司"
  },
  {
    label: "交易账户",
    prop: "accountId",
    required: true
  },
  {
    label: " ",
    prop: "hidden1"
  },
  {
    label: " ",
    prop: "hidden2",
    inputType: "password"
  },
  {
    label: "交易密码",
    prop: "password",
    type: "password",
    required: true
  },
  {
    label: "APPID",
    prop: "appid",
    required: true
  },
  {
    label: "认证码",
    prop: "authCode",
    required: true
  },
  {
    label: "前置地址",
    prop: "address",
    required: true
  }
];

export default {
  components: {
    Explain,
    ConnectionStatus
  },
  // mixins: [beforeEnter],
  data() {
    return {
      hedgeDict,
      loading: false,
      accountList: [],
      accountColumns,
      updateVisible: false,
      modalTitle: undefined,
      updateRow: {},
      updateForm: {
        futuresCompanyId: undefined,
        accountId: undefined,
        password: undefined,
        appid: undefined,
        authCode: undefined,
        address: undefined
      },
      updateFormData,
      futuresCompanys: [], // 期货公司
      explainVisible: false // 自动套保功能说明弹窗
    };
  },
  watch: {
    updateVisible(val) {
      if (val) {
        // 期货公司为空时请求数据
        if (this.futuresCompanys.length === 0) this.getFuturesCompanyList();
      }
    }
  },
  methods: {
    // 登录账号
    loginAccount(row) {
      hedgeaccountlogin({
        id: row.id
      }).then(() => {
        this.$message.success("操作成功");
        this.reload();
      });
    },
    // 测试连接
    testConnect() {},
    afterClose() {
      this.updateRow = {};
      this.updateForm = {
        futuresCompanyId: undefined,
        accountId: undefined,
        password: undefined,
        appid: undefined,
        authCode: undefined,
        address: undefined
      };
    },
    // 提交套保账户操作
    updateAccountSubmit() {
      this.$refs.updateForm.validated().then(() => {
        let request = this.updateRow.id ? updatehedgeaccount : addhedgeaccount;
        let params = {
          id: this.updateRow.id || undefined,
          ...this.updateForm
        };
        request(params).then(() => {
          this.$message.success("操作成功");
          this.updateVisible = false;
          this.reload();
        });
      });
    },
    // 新增套保账户
    addAccount() {
      this.updateVisible = true;
      this.modalTitle = "新增套保账户";
    },
    // 编辑套保账户
    editAccount(row) {
      this.updateRow = row;
      this.updateVisible = true;
      this.modalTitle = "编辑套保账户";
      this.updateForm = {
        futuresCompanyId: row.futuresCompanyId,
        accountId: row.accountId,
        password: row.password,
        appid: row.appid,
        authCode: row.authCode,
        address: row.address
      };
    },
    // 删除套保账户
    delAccount(row) {
      deletehedgeaccount({
        id: row.id
      }).then(() => {
        this.$message.success("操作成功");
        this.reload();
      });
    },
    // 刷新列表
    reload() {
      this.getHedgeAccountList();
    },
    // 获取期货公司
    getFuturesCompanyList() {
      getfuturescompanys().then(res => {
        this.futuresCompanys = res;
      });
    },
    // 获取套保账户列表
    getHedgeAccountList() {
      this.loading = true;
      gethedgeaccountlist()
        .then(res => {
          this.accountList = res;
        })
        .finally(() => {
          this.loading = false;
        });
    }
  },
  created() {
    this.getHedgeAccountList();
  }
};
</script>

<style lang="scss" scoped>
.c-form {
  ::v-deep .ant-form-item:nth-child(3),
  ::v-deep .ant-form-item:nth-child(4) {
    height: 1px;
    overflow: hidden;
    margin: 0;
  }
}
</style>
